<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>【抖音短视频】记录美好生活-Douyin.com</title>
        <style type="text/css">
            html,body {
                padding: 0;
                margin: 0;
                height: 100%;
            }
            video {
                position: relative;
                height: 100%;
                width: 100%;
                vertical-align: baseline;
                object-fit: cover ;
            }
            a,a:hover {
                text-decoration: none;
                color: inherit;
            }
            .head {
                position: absolute;
                left: 0;
                top: 0;
                height: auto;
                line-height: 75px;
                width: 100%;
            }
            /* 左侧 logo 部分样式 */
            .head .logo {
                margin-left: 80px;
                margin-top: 10px;
                height: 55px;
                width: auto;
                float: left;
            }
            .head .logo img {
                margin: 5px 0;
                cursor: pointer;
            }
            /* 右侧部分样式 */
            .head .nav {
                float: right;
                margin-right: 140px;
                width: 760px;
            }
            .head>ul>li {
                position: relative;
                float: left;
                margin-left: 25px;
                list-style: none;
                height: 55px;
                line-height: 55px;
                vertical-align: middle;
                cursor: pointer;
                color: #ffffff;
            }
            .head>ul>li  .create-platform {
                position: absolute;
                top:45px;
                left: 50%;
                margin-left: -99px;
                padding-top: 14px;
                font-size: 14px;
                line-height: 20px;
                background-image: url("https://s3.pstatp.com/aweme/resource/web/static/image/index/create-bubble_c2cd9db.png");
                width: 198px;
                height: 42px;
                box-sizing: border-box;
                text-align: center;
            }
            .head>ul>li .intro .more {
                display: inline-block;
                width: 8px;
                height: 8px;
                background-image: url("https://s3.pstatp.com/aweme/resource/web/static/image/index/subtract_67c835d.png");
                background-size: cover;
                background-repeat: no-repeat;
            }
                /* 下拉框样式 */
            .head>ul>li .menu {
                position: absolute;
                display: none;
                top:45px;
                left: -9px;
                width: 96px;
                background-color: #ffffff;
                box-shadow:  0 0 8px rgba(0,0,0,.16), 0 0 2px rgba(0,0,0,.12);
                border-radius: 4px;
                box-sizing: border-box;
                padding: 8px 0;
            }
            .head>ul>li:hover .menu {
                display: block;
            }
            .head>ul>li .menu li {
                list-style: none;
                text-align: center;
                font-size: 14px;
                line-height: 40px;
                color: rgba(0,0,0,.9);
                height: 40px;
                cursor: pointer;
            }
            .head>ul>li .menu li:hover {
                background-color: rgba(51,51,51,.1);;
            }
            .head>ul>li .mute {
                background: url("https://s3.pstatp.com/aweme/resource/web/static/image/index/unmute_1bbc0c3.png") no-repeat center;
                background-size: cover;
                cursor: pointer;
                width: 22px;
                height: 22px;
                margin-top: 16px;
            }
        </style>
    </head>
    <body>
        <video src="https://s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v3_0b9db49.mp4" muted loop autoplay >
            抱歉，您的浏览器不支持内嵌视频
        </video>
        <div class="head">
            <div class="logo">
                <img src="https://s3.pstatp.com/aweme/resource/web/static/image/index/logo_b7a2aca.png" style="height: 45px">
            </div>
            <ul class="nav">
                <li>
                    <a href="">创作服务平台</a>
                    <div class="create-platform">原【视频上传】已并入此功能</div>
                </li>
                <li>开放平台</li>
                <li>
                    <div class="intro">
                        <a href="">系列产品</a>
                        <div class="more"></div>
                    </div>
                    <ul class="menu">
                        <li>抖音火山版</li>
                        <li>剪映</li>
                        <li>多闪</li>
                    </ul>
                </li>
                <li>
                    <div class="intro">
                        <a href="">系列产品</a>
                        <div class="more"></div>
                    </div>
                    <ul class="menu">
                        <li>直播机构入驻</li>
                    </ul>
                </li>
                <li>
                <div class="intro">
                    <a href="">系列产品</a>
                    <div class="more"></div>
                </div>
                <ul class="menu">
                    <li>MCN入驻</li>
                    <li>抖音特效师</li>
                    <li>抖音音乐人</li>
                    <li>社会机构入驻</li>
                </ul>
            </li>
                <li>
                    <div class="intro">
                        <a href="">系列产品</a>
                        <div class="more"></div>
                    </div>
                    <ul class="menu">
                        <li>企业服务平台</li>
                        <li>企业认证</li>
                        <li>广告投放</li>
                    </ul>
                </li>
                <li>联系我们</li>
                <li>
                    <div class="mute"></div>
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        (
            function () {
                let voice=document.querySelector(".head>ul>li .mute");
                let video=document.querySelector( "video");

                let action=function(){
                    if(video.muted){
                        voice.style.backgroundImage="url('https://s3.pstatp.com/aweme/resource/web/static/image/index/mute_acbcfbc.png')";
                    }
                    else {
                        voice.style.backgroundImage="url('https://s3.pstatp.com/aweme/resource/web/static/image/index/unmute_1bbc0c3.png')";
                    }
                    video.muted=!video.muted;
                };

                voice.addEventListener("click",action,false);
            }
        )();
    </script>
</html>